<template>
  <div>
    <template v-if="formData.popupType==='general'">
      <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible" @close="goBack"  
        class="JNPF-dialog JNPF-dialog_center" lock-scroll :width="formData.generalWidth"
        append-to-body>
        <div class="dynamicDetail" v-loading="loading || mainLoading">
          <Parser :formConf="formData" :relationData="relationData" @toDetail="toDetail"
            v-if="!loading" :formValue="formValue" />
        </div>
        <span slot="footer" class="dialog-footer">
          <template v-if="formData.hasPrintBtn && formData.printId">
            <el-button type="primary" @click="printBrowseVisible=true">
              {{formData.printButtonText||'打 印'}}
            </el-button>
          </template>
          <el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
        </span>
      </el-dialog>
    </template>
    <template v-if="formData.popupType==='fullScreen'">
      <transition name="el-zoom-in-center">
        <div class="JNPF-preview-main">
          <div class="JNPF-common-page-header">
            <el-page-header @back="goBack" content="详情" />
            <div class="options">
              <template v-if="formData.hasPrintBtn && formData.printId">
                <el-button type="primary" @click="printBrowseVisible=true">
                  {{formData.printButtonText||'打 印'}}
                </el-button>
              </template>
              <el-button @click="goBack">{{$t('common.cancelButton')}}</el-button>
            </div>
          </div>
          <div class="dynamic-form-main dynamicDetail"
            :style="{margin: '0 auto',width:formData.fullScreenWidth}"
            v-loading="loading || mainLoading">
            <Parser :formConf="formData" :relationData="relationData" @toDetail="toDetail"
              v-if="!loading" :formValue="formValue" />
          </div>
        </div>
      </transition>
    </template>
    <template v-if="formData.popupType==='drawer'">
      <el-drawer title="详情" :visible.sync="visible" :wrapperClosable="false"
        :size='formData.drawerWidth' append-to-body class="JNPF-common-drawer">
        <div class="JNPF-flex-main">
          <div class="dynamicForm dynamicDetail" v-loading="loading || mainLoading">
            <Parser :formConf="formData" :relationData="relationData" @toDetail="toDetail"
              v-if="!loading" :formValue="formValue" />
          </div>
          <div class="drawer-footer">
            <template v-if="formData.hasPrintBtn && formData.printId">
              <el-button type="primary" @click="printBrowseVisible=true">
                {{formData.printButtonText||'打 印'}}
              </el-button>
            </template>
            <el-button @click="visible = false">{{$t('common.cancelButton')}}</el-button>
          </div>
        </div>
      </el-drawer>
    </template>
    <Detail v-if="detailVisible" ref="Detail" @close="detailVisible = false" />
    <print-browse :visible.sync="printBrowseVisible" :id="formData.printId" :formId="dataForm.id" />
  </div>
</template>

<script>
import { getDataChange, getConfigData } from '@/api/onlineDev/visualDev'
import { getDataInterfaceDataInfo } from '@/api/systemData/dataInterface'
import { deepClone } from '@/utils'
import Parser from './Parser'
import PrintBrowse from '@/components/PrintBrowse'
import { getToken } from '@/utils/auth'
import { priceFormat,bfbFormat,getAmountChinese } from '@/components/Generator/utils'
export default {
  name: 'Detail',
  components: { Parser, PrintBrowse },
  data() {
    return {
      visible: false,
      dataForm: {
        id: '',
        data: ''
      },
      modelId: '',
      formData: {},
      formValue: {},
      loading: true,
      mainLoading: false,
      detailVisible: false,
      relationData: {},
      useFormPermission: false,
      printBrowseVisible: false,
      formOperates: []
    }
  },
  methods: {
    goBack() {
      debugger
      this.$store.commit('generator/SET_VIEW_STATUS', '')
      this.$emit('close')
    },
    init(formData, modelId, id, useFormPermission) {
      debugger
      this.$store.commit('generator/SET_VIEW_STATUS', 'detail')

      this.formData = deepClone(formData)
      this.modelId = modelId
      this.useFormPermission = useFormPermission
      this.dataForm.id = id || ''
      this.getFormOperates()
      this.loading = true
      this.relationData = {}
      this.$nextTick(() => {
        if (this.dataForm.id) {
          let extra = {
            modelId,
            id,
            type: 2
          }
          this.$store.commit('generator/SET_DYNAMIC_MODEL_EXTRA', extra)
          getDataChange(modelId, this.dataForm.id).then(res => {
            this.dataForm = res.data
            if (!this.dataForm.data) return
            this.formValue = JSON.parse(this.dataForm.data)
            this.fillFormData(this.formData, this.formValue)
            this.visible = true
          })
        } else {
          this.formValue = {}
          this.loading = false
          this.visible = false
          this.$emit('close')
        }
      })
    },
    unique(arr, attrName) {
      const res = new Map()
      // 根据对象的某个属性值去重
      return arr.filter(o => !res.has(o[attrName]) && res.set(o[attrName], 1))
    },
    handleAttrList(list) {
      let realList = this.unique(list, 'relationField')
      for (let i = 0; i < realList.length; i++) {
        const item = realList[i];
        let modelId = '', id = "", field = "", jnpfKey = '', activeItem = {}
        let prop = item.relationField.split('_jnpfTable_')[0]
        const loop = list => {
          for (let i = 0; i < list.length; i++) {
            if (prop === list[i].__vModel__) {
              jnpfKey = list[i].__config__.jnpfKey
              modelId = list[i].__config__.jnpfKey === 'relationForm' ? list[i].modelId : list[i].interfaceId
              id = list[i].__config__.defaultValue
              field = list[i].__config__.tableName ? list[i].__vModel__ + '_jnpfTable_' + list[i].__config__.tableName + (list[i].__config__.isSubTable ? '0' : "1") : list[i].__vModel__
              activeItem = list[i]
              break
            }
            if (list[i].__config__ && list[i].__config__.jnpfKey !== 'table' && list[i].__config__.children && Array.isArray(list[i].__config__.children)) {
              loop(list[i].__config__.children)
            }
          }
        }
        loop(this.formData.fields)
        if (!id) {
          this.$set(this.relationData, field, "")
          continue
        }
        if (jnpfKey === 'relationForm') {
          getDataChange(modelId, id).then(res => {
            if (!res.data || !res.data.data) {
              this.$set(this.relationData, field, "")
              return
            }
            let data = JSON.parse(res.data.data)
            this.$set(this.relationData, field, data)
          }).catch(() => { this.$set(this.relationData, field, "") })
        }
        if (jnpfKey === 'popupSelect') {
          let query = {
            id: id,
            interfaceId: modelId,
            propsValue: activeItem.propsValue,
            relationField: activeItem.relationField,
          }
          getDataInterfaceDataInfo(modelId, query).then(res => {
            if (!res.data) return this.$set(this.relationData, field, "")
            this.$set(this.relationData, field, res.data)
          }).catch(() => { this.$set(this.relationData, field, "") })
        }
      }
    },
    toDetail(item) {
      if (!item.__config__.defaultValue) return
      this.mainLoading = true
      getConfigData(item.modelId).then(res => {
        this.mainLoading = false
        if (!res.data) return
        if (!res.data.formData) return
        let formData = JSON.parse(res.data.formData)
        formData.popupType = this.formData.popupType
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.Detail.init(formData, item.modelId, item.__config__.defaultValue)
        })
      }).catch(() => { this.mainLoading = false })
    },
    getFormOperates() {
      if (!this.useFormPermission) return
      const permissionList = this.$store.getters.permissionList
      const modelId = this.$route.meta.modelId
      const list = permissionList.filter(o => o.modelId === modelId)
      this.formOperates = list[0] && list[0].form ? list[0].form : []
    },
    fillFormData(form, data) {
      let relationFormAttrList = []
      let formatInputList = []
      this.initDynamicConfig(form.fields,data)
      const loop = list => {
        for (let i = 0; i < list.length; i++) {
          let item = list[i]
          if (item.__vModel__) {
            if (item.__config__.jnpfKey === 'relationForm' || item.__config__.jnpfKey === 'popupSelect') {
              let id = data[item.__vModel__ + '_id']
              if (id) item.__config__.defaultValue = id
              this.$set(item, 'name', data[item.__vModel__] || '')
            } else {
              const val = data[item.__vModel__]
              if (val) item.__config__.defaultValue = val
            }
            if (this.useFormPermission) {
              let noShow = true
              if (this.formOperates && this.formOperates.length) {
                noShow = !this.formOperates.some(o => o.enCode === item.__vModel__)
              }
              noShow = item.__config__.noShow ? item.__config__.noShow : noShow
              this.$set(item.__config__, 'noShow', noShow)
            }
          }
          if (['relationFormAttr', 'popupAttr'].includes(item.__config__.jnpfKey)) relationFormAttrList.push(item)

          if (['moneyInput','calculate'].includes(item.__config__.jnpfKey)) formatInputList.push(item)
           /**
           * by jdeng 设置defaultValue
           */
           if (item.__config__ && item.__config__.jnpfKey === 'listTable'){
            item.__config__.defaultValue = this.dataForm.id
            this.$set(item.__config__, 'viewStatus', 'detail')
            debugger
            let __subTableDatas__ = data['__subTableDatas__']
            if(__subTableDatas__){
              let subData = __subTableDatas__[item.__config__.tableName]
              this.$set(item.__config__, 'initData', subData)
            }
          }
          // end by jdeng
          if (item.__config__ && item.__config__.jnpfKey !== 'table' && item.__config__.children && Array.isArray(item.__config__.children)) {
            loop(item.__config__.children)
          }
        }
      }
      loop(form.fields)
      this.handleAttrList(relationFormAttrList)
      this.parseIframeUrl(form.fields,data)
      this.formatNumberInput(formatInputList,data)
      this.loading = false
    },
    /**
     * by jdeng for 格式化数字输入
     * @param {*} formatInputList 
     * @param {*} formData 
     */
    formatNumberInput(formatInputList,formData){
      formatInputList.forEach(cur => {
        debugger
        const config = cur.__config__
        const vModel = cur.__vModel__
        let {formatType,showChinese,unit='',currency=''} = config
        let val = formData[vModel]
        if(formatType===1){
          if(showChinese&&currency==='¥'){
            val = getAmountChinese(val)
          }else{
            val = priceFormat(val)
          }
        }else{
          val = bfbFormat(val)
        }
        config.defaultValue = currency + ' ' + val + ' '+unit
      })
    },
    /**
     * by jdeng 解析动态配置
     * @param {*} componentList 
     */
     initDynamicConfig(componentList,formData){
      debugger
      let dynamicItem
      componentList.forEach(cur => {
        if (cur.__vModel__ === 'F_FormDynamicConf') {
          dynamicItem = cur
          return;
        }
      })
      if(!dynamicItem){
        return;
      }
      const config = dynamicItem.__config__
      const vModel = dynamicItem.__vModel__
      const initConfigCall = (list,key,prop,value)=>{
        list.forEach(cur => {
          const config = cur.__config__
          if (cur.__vModel__ === key) {
            config[prop]=value
            return
          }
          if (cur.__config__.jnpfKey == 'table') return
          if (config.children) initConfigCall(config.children, key,prop,value)
        })
      }
      try{
          let dynamicJsonStr = formData[vModel]
          if(dynamicJsonStr){
            config.defaultValue = dynamicJsonStr
            let dynamicJson = JSON.parse(dynamicJsonStr)
            if(dynamicJson){
              if(dynamicJson.showOrHide){ // 动态设置显示隐藏属性
                let showOrHide = dynamicJson.showOrHide
                for (let key in showOrHide) {
                  const newVal = !!showOrHide[key]
                  initConfigCall(componentList,key,'noShow',!newVal)
                }
              }
              if(dynamicJson.currency){ // 动态设置显示隐藏属性
                let currency = dynamicJson.currency
                for (let key in currency) {
                  const newVal = currency[key]
                  initConfigCall(componentList,key,'currency',newVal)
                }
              }
              if(dynamicJson.flowStag){ // 动态设置流程步骤属性
                
              }
            }
           
          }
      }catch(e){
        console.error(e)
      }
    },
    parseIframeUrl(componentList,formData){
      let iframeItem
      debugger
      componentList.forEach(cur => {
        if (cur.__config__.jnpfKey == 'iframe') {
          iframeItem = cur
          return;
        }
      })
      if(!iframeItem){
        return;
      }
      const config = iframeItem.__config__
      let {isReport,defaultValue,regList} = config
      let url = defaultValue
      if(isReport){
        const token = getToken()
        url = `${this.define.report}/preview.html?id=${defaultValue}&token=${token}&page=1&from=detail`
      }else{
        if(url.indexOf('http')!=0){
          url = ""
        }
      }
      if(regList&&regList.length>0){
        let params = ''
        /**
         * 构造参数
         */
        regList.map((item,index)=>{
          let {paramName,fieldName} = item
          if(fieldName==='F_ID'){
            let dynamicModelExtra = this.$store && this.$store.state && this.$store.state.generator && this.$store.state.generator.dynamicModelExtra ? this.$store.state.generator.dynamicModelExtra : {}
            let id = dynamicModelExtra.id?dynamicModelExtra.id:''
            params+=paramName+'='+id+'&'
          }else{
            const loopCall = (list,key,tempObj)=>{
              list.forEach(cur => {
                const config = cur.__config__
                if (cur.__vModel__ === key) {
                  tempObj[key]=config.defaultValue
                  return
                }
                if (cur.__config__.jnpfKey == 'table') return
                if (config.children) loopCall(config.children, key,tempObj)
              })
            }
            let tempObj = {}
            loopCall(componentList,fieldName,tempObj)
            let paramValue = tempObj[fieldName]?tempObj[fieldName]:fieldName
            params+=paramName+'='+paramValue+'&'
          }
        })
        url+=(url.indexOf('?')!=0?'&'+params:'?'+params)
      }

      config.defaultValue = url
    }
  }
}
</script>